<template>
  <el-dialog v-model="visible" :close-on-click-modal="false" draggable width="600px">
    <el-form
      :model="form"
      ref="formRef"
      :rules="rules"
      :inline="true"
      label-position="left"
      label-width="auto"
    >
      <el-form-item label="上传背景图片:" prop="remark">
        <ImageUploadByType
          v-model="form.remark"
          :isShowTip="true"
          uploadType="1"
          :limit="1"
          :fileSize="20"
        />
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: flex-end">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { getData, updateData } from '@/api/system/dict/data'

const visible = ref(false)
const form = ref({ remark: null })
const formRef = ref()
const rules = ref({ remark: [{ required: true, message: '抽奖背景图必填', trigger: 'blur' }] })
function confirm() {
  formRef.value.validate((valid) => {
    if (valid) {
      form.value.remark = form.value?.remark[0]?.url
      updateData(form.value).then(() => {
        visible.value = false
      })
    }
  })
}

function init() {
  visible.value = true
  getData(166).then((res) => {
    form.value = res.data
  })
}
defineExpose({
  init
})
</script>
<style lang="scss" scoped></style>
